<template>
    <TopNavComponent />
    <SwiperComponent :banners="banners" />
    <ShopNavView />
    <div class="ad">
        <div class="ad-one">
            <img src="../../assets/images/ad-1.jpg" alt="">
        </div>
        <div class="ad-tow">
            <img src="../../assets/images/ad-2.jpg" alt="">
        </div>
    </div>
    <ShopSeckillView />
    <div class="suit">
        <img src="../../assets/images/t1.jpg" alt="">
    </div>
    <RollComponent :rollInfo="suit">
        <div class="suit-content">
            <div class="suit-item" v-for="(item,index) in suitList" :key="index">
                <img :src="item.image" alt="">
                <p>{{ item.title }}</p>
                <span>{{ item.price }}元起</span>
            </div>
        </div>
    </RollComponent>
    <div class="discount">
        <h3>特惠专题</h3>
        <img src="../../assets/images/d1.png" alt="">
        <img src="../../assets/images/d2.jpg" alt="">
    </div>
    <CardComponent :title="singleGoodsTitle" :cards="singleGoods" />
</template>
<script setup lang="ts">

import { ref, reactive, onMounted } from "vue"
import api from "../../api/index"

import TopNavComponent from '@/components/TopNavComponent.vue'
import SwiperComponent from '@/components/SwiperComponent.vue'
import ShopNavView from "./ShopNavView.vue"
import ShopSeckillView from "./ShopSeckillView.vue"
import RollComponent from "@/components/RollComponent.vue"
import CardComponent from "@/components/CardComponent.vue"


interface IBanner {
    image: string,
    title: string,
    url: string
}

const banners = ref<IBanner[]>([])

onMounted(() => {
    api.getHomeBanner().then(res => {
        banners.value = res.data.data
    })
})

interface ISuit {
    title: string,
    all: string
}

const suit:ISuit = reactive({
    title: "精选套装",
    all: "查看全部"
})

/**
 * 精选
 */
const singleGoodsTitle = "单品推荐"

interface ISuitList {
    image: any,
    title: string,
    price: string
}

const suitList = ref<ISuitList[]>([])

onMounted(() =>{
    api.getSuit().then(res =>{
        if(res.data.status == 200){
            suitList.value = res.data.data
        }
    })
})

/**
 * 单品推荐
 */
 interface ISingleGoods {
    image: any,
    title: string,
    price: string
}

const singleGoods = ref<ISingleGoods[]>([])

onMounted(() => {
    api.getRecommendGoods().then(res => {
        singleGoods.value = res.data.data
    })
})


</script>
<style lang="less" scoped>

.ad{
    width: 100%;
    height: 100px;
    display: flex;
    margin: 10px 0;
    .ad-one{
        flex:1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
        background: #F7F0F7;
        margin-right: 5px;
        img{
            width: 100%;
        }
    }
    .ad-tow{
        flex:1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
        background: #F7F0F7;
        img{
            width: 100%;
        }
    }
}

.suit{
    img{
        width: 100%;
    }
}

.suit-content{
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    .suit-item{
        margin-right: 10px;
        width: 100px;
        img{
            width: 100px;
            height: 100px;
        }
        p{
            white-space: normal;
            word-break: break-word;
            font-size: 14px;
            text-align: left;
            margin-top: 5px;
        }
        span{
            display: block;
            text-align: left;
            font-size: 14px;
            color: #F23D52;
            margin-top: 5px;
        }
    }
}

.discount{
    background: #fff;
    margin-top: 5px;
    h3{
        text-align: center;
        font-size: 15px;
        font-weight: 400;
        padding: 15px 0;
    }
    img{
        width: 100%;
    }
}

</style>